<template>
  <div class="fire-level">
    <div class="title"></div>
    <div class="data">
      <StackedBarChart :echartsData="echartsData" />
    </div>

    <div class="summary-text">火灾总数（起）：17936</div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import StackedBarChart from '@/components/echarts/stackedBarChart.vue';

const echartsData = {
  label: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  data: [
    {
      name: '一级',
      value: [10, 12, 13, 15, 4, 5, 9, 8, 7, 8, 9, 11, 10],
    },
    {
      name: '二级',
      value: [2, 3, 4, 3, 4, 5, 3, 2, 1, 3, 4, 3, 2],
    },
    {
      name: '三级',
      value: [1, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2],
    },
    {
      name: '四级',
      value: [1, 2, 1, 2, 1, 1, 1, 2, 1, 2, 3, 2, 3],
    },
  ],
};

defineComponent({ name: 'FireLevelComp' });
</script>

<style scoped lang="scss">
.fire-level {
  @apply relative w-full h-full;

  .title {
    @apply w-full h-[31px];
    background: url('./assets/title.png') no-repeat center;
  }

  .data {
    @apply w-full h-[370px];
  }

  .summary-text {
    @apply absolute top-0 right-0 text-[16px] text-[#B2E1FF];
    font-family: Alibaba PuHuiTi;
  }
}
</style>
